<template>
  <div>
        <ul class="bread">
          <li><a href="./">首页</a></li> >
          <li>系统管理</li>
        </ul>
      <el-row class="tac">
        <el-col :span="3">
          <h5>账号管理</h5>
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item index="1" @click="showUser">
              <i class="el-icon-setting"></i>
              <span slot="title">权限管理</span>
            </el-menu-item>
            <el-menu-item index="2" @click="adminUser">
              <i class="el-icon-setting"></i>
              <span slot="title">账号管理</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <router-view :span="20" style="margin-top:60px;display:inline-block;width:1200px"></router-view>
      </el-row>
  </div>
</template>
<script>
export default {
  data() {
      return {
      }
    },
  created(){
    if(sessionStorage.getItem('name') && sessionStorage.getItem('loginkey')){
      if(sessionStorage.getItem('name') != 'guo'){
        this.$alert('无权查看', ' ', {
          confirmButtonText: '确定',
          callback: action => {
            location.href="http://www.guolinyu.com"
          }
        });
      }
    }else{
      this.$router.push('/login')
    }
  },
  methods: {
    showUser(){
      this.$router.push('/admin/showUser');
    },
    adminUser(){
      this.$router.push('/admin/adminUser');
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
<style scoped>
  ul.bread{
      margin: 20px 0;
      font-size: 14px;
      color: #aaa
  }
  ul.bread li{
      display: inline;
  }
  ul.bread li a{
      text-decoration: none;
  }
</style>
